<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>照片墙</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			height: 400px;
			border: 1px solid black;
			background-color: skyblue;
			margin-top: 100px;
			text-align: center;
		}
		ul li{
			list-style: none;
			width: 150px;
			height: 200px;
			margin-top: 100px;
			display: inline-block;
			transition: all 1s;
			position: relative; /*这样才能有层次结构*/
			box-shadow: 0 0 10px;
		}
		ul li img {
			height: 200px;
			width: 150px;
			border: 5px solid #fff;
			box-sizing: border-box;
		}
		ul li:nth-child(1) {
			transform: rotateZ(45deg);
		}
		ul li:nth-child(2) {
			transform: rotateZ(-32deg);
		}
		ul li:nth-child(3) {
			transform: rotateZ(25deg);
		}
		ul li:nth-child(4) {
			transform: rotateZ(50deg);
		}
		
		ul li:hover{
			/* transform: none */
			transform:scale(2);
			z-index: 999;
			cursor: pointer;

		}
		
	</style>
</head>
<body>
	<ul>
		<li><img src="../images/1.jpg" alt=""></li>
		<li><img src="../images/5.jpg" alt=""></li>
		<li><img src="../images/9.jpg" alt=""></li>
		<li><img src="../images/10.jpg" alt=""></li>
	</ul>
	
</body>
</html>